<template>
  <el-dialog
      :title="type==='add'?'新增角色':'编辑角色'"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeDialog" center
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="width:400px">
      <el-form-item label="角色名称" prop="roleTitle">
        <el-input v-model="form.roleTitle" placeholder="输入角色名称"/>
      </el-form-item>
      <el-form-item label="菜单管理" prop="menuIds">
        <el-tree
            ref="tree"
            :data="menus"
            show-checkbox
            node-key="id"
            highlight-current
            :expand-on-click-node="expand"
            :props="defaultProps"
        ></el-tree>
      </el-form-item>
      <el-form-item style="margin-top:40px">
        <el-button style="width:100px;" type="primary" @click="submit" :loading="loading">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import {menu_list} from "@/api/sysmenu";
import {role_add, role_update, role_detail} from "@/api/sysrole";

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: "add"
    },
    editId: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      loading: false,
      form: {
        roleTitle: "",
        menuIds: []
      },
      rules: {
        roleTitle: [
          {required: true, message: "输入角色名称", trigger: "blur"}
        ],
        menuIds: [{required: true, message: "请选择", trigger: "blur"}]
      },
      menus: [],
      defaultProps: {
        children: "children",
        label: "title"
      },
      expand: false
    };
  },
  watch: {
    editId(v1, v2) {
      this.form = {
        roleTitle: "",
        menuIds: []
      };
      //this.$refs.tree.setCheckedKeys([]);
      if (this.type === "edit") {
        this.detail();
      }
    }
  },
  mounted() {
    this.initMenu();
  },
  methods: {
    /**
     * 角色详情
     */

    detail() {
      role_detail(this.editId).then(res => {
        if (res.status === 200) {
          this.form = res.data;
          this.$refs.tree.setCheckedKeys(res.data.menuIds);
        }

      });
    },
    /**
     * 提交角色
     */
    submit() {
      this.form.menuIds = this.$refs.tree.getCheckedKeys();
      this.$refs["form"].validate(valide => {
        if (valide) {
          this.loading = true;
          if (this.type === "edit") {
            let params = {};
            params.roleId = this.editId;
            params.roleTitle = this.form.roleTitle;
            params.menuIds = this.form.menuIds;
            role_update(params).then(res => {
              if (res.status === 200) {
                this.loading = false;
                this.$message.success("更新成功");
                this.$emit("update:dialogVisible", false);
                this.$emit("submit");
              }
            });
          }
          if (this.type === "add") {
            role_add(this.form).then(res => {
              if (res.status === 200) {
                this.loading = false;
                this.$emit("update:dialogVisible", false);
                this.$emit("submit");
                this.$message.success("添加成功");
              }
            });
          }
        }
      });
    },
    /**
     * 初始化菜单
     */
    initMenu() {
      menu_list().then(res => {
        this.menus = res.data;
      });
    },
    /**
     * 关闭弹窗
     */
    closeDialog() {
      this.$emit("update:dialogVisible", false);
    }
  }
};
</script>
<style lang="less">
</style>
